import { mapGetters, mapActions, mapMutations } from 'vuex'

const fullscreenMixin = {
  computed: {
    ...mapGetters(['fullScreen'])
  },
  mounted () {
    const that = this
    // 监听enter事件，退出全屏
    window.addEventListener('keyup', function (event) {
      // 13 为enter键的keyCode值，当监听到enter键的触发，立即退出全屏。
      // 该按键不为固定，可以随意更换： 如 27 esc键
      if (event.keyCode === 27) {
        console.log('退出全屏')
      }
    })
    window.addEventListener('fullscreenchange', function () {
      if (document.fullscreenElement) {
        // that.$message('按 esc 按钮即可退出全屏模式')
        console.log('进入全屏')
        that.SET_FULLSCREEN(true)
      } else {
        console.log('退出全屏')
        that.SET_FULLSCREEN(false)
      }
    })
  },
  methods: {
    ...mapActions(['togglFullScreen']),
    ...mapMutations(['SET_FULLSCREEN'])
  }
}

export default fullscreenMixin
